<template>
  <div class="CheckHospital">
    <!-- 面包屑-- -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '' }">医院信息管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/hospital' }"
        >医院管理</el-breadcrumb-item
      >
      <el-breadcrumb-item :to="{ path: '/checkHospital' }"
        >查看医院</el-breadcrumb-item
      >
    </el-breadcrumb>
    <!-- 医院的基本信息 -->
    <div class="HospitalMessage">
      <h2>医院信息</h2>
      <el-row :gutter="10">
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
          <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
          <div class="grid-content bg-purple-light">
            <span>医院名称：</span><span>{{ singleHosMsg.hos_name }}</span>
          </div>
        </el-col>
        <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
          <div class="grid-content bg-purple">
            <span>医院等级:</span><span>{{ singleHosMsg.estate }}</span>
          </div>
        </el-col>
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
          <div class="grid-content bg-purple-light"></div>
        </el-col>
      </el-row>
      <br />
      <el-row :gutter="10">
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
          <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
          <div class="grid-content bg-purple-light">
            <span>医院别称:</span><span>{{ singleHosMsg.aliss }}</span>
          </div>
        </el-col>
        <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
          <div class="grid-content bg-purple">
            <span>医院性质:</span><span>{{ singleHosMsg.nature }}</span>
          </div>
        </el-col>
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
          <div class="grid-content bg-purple-light"></div>
        </el-col>
      </el-row>
      <br />
      <el-row :gutter="10">
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
          <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
          <div class="grid-content bg-purple-light">
            <span>医院联系电话:</span><span>{{ singleHosMsg.telephone }}</span>
          </div>
        </el-col>
        <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
          <div class="grid-content bg-purple">
            <span>服务热线:</span><span>{{ singleHosMsg.helpline }}</span>
          </div>
        </el-col>
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
          <div class="grid-content bg-purple-light"></div>
        </el-col>
      </el-row>
      <br />
      <el-row :gutter="10">
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
          <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
          <div class="grid-content bg-purple-light">
            <span>医院联系人:</span><span>{{ singleHosMsg.contact }} </span>
          </div>
        </el-col>
        <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
          <div class="grid-content bg-purple">
            <span>联系人电话:</span><span>{{ singleHosMsg.hos_phone }}</span>
          </div>
        </el-col>
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
          <div class="grid-content bg-purple-light"></div>
        </el-col>
      </el-row>
    </div>
    <!-- 新增科室 -->
    <div class="HospitalList">
      <div class="content">
        <h2>科室信息</h2>
        <!-- 模态框 -->
        <!-- Form -->
        <el-button type="primary" @click="dialogFormVisible = true"
          >新增部门科室</el-button
        >
        <el-dialog title="新增科室" :visible.sync="dialogFormVisible">
          <el-form :model="addOfficeForm">
            <el-form-item label="医院名字" :label-width="formLabelWidth">
              <el-input
                autocomplete="off"
                style="width: 60%"
                v-model="addOfficeForm.name"
              ></el-input>
            </el-form-item>
            <el-form-item label="科室名称" :label-width="formLabelWidth">
              <el-input
                v-model="addOfficeForm.depName"
                autocomplete="off"
                style="width: 60%"
              ></el-input>
            </el-form-item>
            <el-form-item label="负责人" :label-width="formLabelWidth">
              <el-input
                v-model="addOfficeForm.functionary"
                autocomplete="off"
                style="width: 60%"
              ></el-input>
            </el-form-item>
            <el-form-item label="联系电话" :label-width="formLabelWidth">
              <el-input
                v-model="addOfficeForm.depPhone"
                autocomplete="off"
                style="width: 60%"
              ></el-input>
            </el-form-item>
            <el-form-item label="上级" :label-width="formLabelWidth">
              <el-select
                v-model="addOfficeForm.superior"
                placeholder="请选择"
                style="width: 60%"
              >
                <el-option
                  label="上海癫痫总院"
                  value="shanghaiyuan"
                ></el-option>
                <el-option label="北京癫痫总院" value="beijingyuan"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addOfficeBtn('addOfficeForm')"
              >确 定</el-button
            >
          </div>
        </el-dialog>
      </div>
      <!-- 编辑科室模态框 -->
      <el-dialog title="编辑科室" :visible.sync="dialogFormVisible1">
        <el-form :model="updateOfficeForm">
          <el-form-item label="科室名字" :label-width="formLabelWidth">
            <el-input
              v-model="updateOfficeForm.depName"
              autocomplete="off"
              style="width: 60%"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系电话" :label-width="formLabelWidth">
            <el-input
              v-model="updateOfficeForm.depPhone"
              autocomplete="off"
              style="width: 60%"
            ></el-input>
          </el-form-item>
          <el-form-item label="负责人" :label-width="formLabelWidth">
            <el-input
              v-model="updateOfficeForm.functionary"
              autocomplete="off"
              style="width: 60%"
            ></el-input>
          </el-form-item>
          <el-form-item label="上级" :label-width="formLabelWidth">
            <el-select
              v-model="updateOfficeForm.superior"
              placeholder="请选择"
              style="width: 60%"
            >
              <el-option label="上海癫痫总院" value="shanghaiyuan"></el-option>
              <el-option label="北京癫痫总院" value="beijingyuan"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="upOdatefficeBtn('updateOfficeForm')"
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <!-- 科室信息列表展示 -->
      <template>
        <el-table :data="departmentList">
          <!--          <template v-if="scope.row.dep_name">-->
          <el-table-column label="科室id">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                scope.row.department_id
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="部门科室">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.dep_name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="人数">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.employees }}</span>
            </template>
          </el-table-column>
          <el-table-column label="上级">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.superior }}</span>
            </template>
          </el-table-column>
          <el-table-column label="负责人">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.functionary }}</span>
            </template>
          </el-table-column>
          <el-table-column label="联系电话">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.dep_phone }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                scope.row.dep_regTime | formatDate
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="middle" type="text" @click="updateBtn(scope.row)"
                >编辑</el-button
              >
            </template>
          </el-table-column>
          <!--          </template>-->
        </el-table>
      </template>
    </div>
    <!-- 返回按键 -->
    <div class="back">
      <el-button plain @click="$router.push('/hospital')">返回</el-button>
    </div>
  </div>
</template>

<script>
import { formatDate } from "@/utils/date";

export default {
  name: "CheckHospital",
  mounted() {
    this.singleHosMsg = this.$route.params.hosMsg[0];
    this.departmentList = this.$route.params.hosMsg;
  },
  filters: {
    //时间戳转换为日期格式
    formatDate(time) {
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm");
    },
  },
  data() {
    return {
      singleHosMsg: {},
      departmentList: [],
      addOfficeForm: {
        name: "",
        depName: "",
        supperior: "",
        functionary: "",
        depPhone: "",
      },
      activeName: "first",
      dialogFormVisible: false,
      dialogFormVisible1: false,
      formLabelWidth: "120px",
      updateOfficeForm: {
        departmentId: "",
        depName: "",
        depPhone: "",
        functionary: "",
        supperior: "",
      },
    };
  },
  methods: {
    updateBtn(row) {
      console.log(row);
      this.updateOfficeForm.departmentId = row.department_id;
      this.updateOfficeForm.depName = row.dep_name;
      this.updateOfficeForm.depPhone = row.dep_phone;
      this.updateOfficeForm.functionary = row.functionary;
      this.updateOfficeForm.supperior = row.superior;
      this.dialogFormVisible1 = true;
    },
    //编辑科室的方法
    upOdatefficeBtn() {
      this.$service.hospitalService
        .updateOffice(this.updateOfficeForm)
        .then((res) => {
          if (res.data.code == 200) {
            this.$message({
              showClose: true,
              message: "修改成功",

              type: "success",
            });
          } else {
            this.$message.error("修改失败");
          }
        });
    },
    //添加科室方法
    addOfficeBtn() {
      this.$service.hospitalService
        .addOffice(this.addOfficeForm)
        .then((res) => {
          console.log(res);
          if (res.data.code == "200") {
            this.$message({
              showClose: true,
              message: "添加成功",
              type: "success",
            });
            this.dialogFormVisible = false;
          } else {
            this.$message.error("添加失败");
          }
        });
    },
  },
};
</script>

<style>
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  margin-top: 3px;
}

.HospitalList {
  margin-top: 20px;
}

.back {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

.content {
  display: flex;
  flex-direction: row;
  padding-left: 46%;
  justify-content: space-between;
}
</style>
